
<style type="text/css">
<!--
a,a:visited {
	color: #1272B5;
}

a.tag {
	background-color: #E0EAF1;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	corner-radius: 5px;
	border: 1px solid #E0EAF1;
	color: #3E6D8E;
	font-size: 90%;
	line-height: 2.4;
	margin: 2px 2px;
	padding: 2px 4px;
	text-decoration: none;
	white-space: nowrap;
	font-size: 12px;
}

a.tag:hover {
	text-decoration: none;
	color: #7F9FB6;
}

.add-link-form {
	margin-right: 5px;
	margin-bottom: 5px;
	margin-top: 10px;
}

.link {
	min-height: 40px;
	border-bottom: 1px dashed #999;
	display: block;
	padding: 10px 2px;
	margin: 4px 0px;
	margin-right: 5px;
}

.link:hover {
	background-color: #eee;
	cursor: pointer;
}

.taglist {
	text-align: right;
}

.link .atitle {
	margin: 0px 0px 2px 0px;
}

.filter {
	color: #bbb;
	font-size: 10px;
	border: 1px dashed #999;
	margin-right: 5px;
}

.ops {
	color: #bbb;
	font-size: 10px;
	text-align: right;
}

.ops a {
	color: #888;
	text-decoration: none;
}

#panel-frame {
	margin-left: 20px;
	max-width: 820px;
	position: fixed;
}

.panel {
	background-color: #f2f2f2;
	width: 410px;
	height: 550px;
	position: relative;
	position: absolute;
	border-left: 0px;
	left: 0;
	align:right;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	corner-radius: 5px;
}

.tags-panel {
	background-color: #f2f2f2;
	width: 410px;
	height: 550px;
	position: relative;
	position: absolute;
	border-left: 0px;
	left: 0;
	align:right;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	corner-radius: 5px;
}

.data {
	width: 250px;
	position:absolute;
	right:5px;
	padding: 20px;
}

.head {
	padding: 10px;
	text-align: right;
}
-->
</style>

#{extends 'main.html' /} #{set 'title'} eazyBookmark - ${user} #{/set}

<div class="alert-message error" id="error-alert">
	<a class="close" href="#">&times;</a>
	<p>
		<strong>${flash.error}!</strong>
	</p>
</div>
<div class="alert-message success" id="success-alert">
	<a class="close" href="#">&times;</a>
	<p>
		<strong>${flash.success}!</strong>
	</p>
</div>


<div id="add-link-form" class="modal hide fade">
	<div class="modal-header">
		<a href="#" class="close">&times;</a>
		<h3>Add bookmark</h3>
	</div>
	#{form @Profile.addlink(), class:'form-stacked' }
	<fieldset>
		<div class="clearfix">
			<label for="url-textbox">Link</label>
			<div class="input">
				<input class="xlarge" id="url-textbox" name="url" size="30"
					type="text" />
			</div>
		</div>
		<!-- /clearfix -->
		<div class="clearfix">
			<label for="url-textbox">Tags,comma separated tag names e.g.
				news, technical, travel, leisure</label>
			<div class="input">
				<input class="xlarge" name="tags" type="text" />
			</div>
		</div>
		<!-- /clearfix -->
		<div class="actions">
			<input type="submit" class="btn primary" value="Save changes">
		</div>
	</fieldset>
	#{/form}

</div>


<div class="row">


	<div class="span5" style="float: right;">
		<h2>Activity</h2>
	</div>

	
	<div id="panel-frame">
		<div class="panel">
			<div class="head">
				<a href="#" class="close_panel">Close</a>
			</div>
			<div class="data"></div>
		</div>
	</div>


	<div class="span9">

		<h2>Your bookmarks</h2>
		
		<div class="add-link-form">
			<button data-controls-modal="add-link-form" data-backdrop="true"
				data-keyboard="true" class="btn large primary">Add bookmark</button>
		</div>

		<div class="filter">
			<button  class="btn primary" id="tags-button">Tags</button>
			 
		</div>

		<div id="links">

			#{list items:links, as:'link'}

			<div class="link" id="${link.id}">
				<!-- title -->
				<div class="title">

					<img align="left"
						src="http://www.google.com/s2/favicons?domain=${link.url.domain()}"
						width="16px" height="16px" border="0" /> #{if link.title} &nbsp;<a
						href="${link.url}">${link.title}</a></span>
					<p style="color: #00B306; margin: 3px 0px; font-size: 90%">${link.url.domain()}</p>
					#{/if} #{else} &nbsp;<span class="alink"><a
						href="${link.url}">${link.url}</a></span> #{/else}
				</div>


				<!-- Description -->
				<div class="description">
					<p style="margin: 3px 0px;">${link.description}</p>
				</div>

				<!-- Tags -->
				<div class="tags">
					#{list items: link.findTagsByLink(), as: 'tag'} <a
						href="@{Profile.index(tag.name)}" class="tag"
						title="Click to see all links with tag '${tag}'">${tag}</a>
					#{/list}
				</div>

				<!-- Operation -->
				<div class="ops">

					<a href="@{Profile.editlink(link.id)}" title="Edit this link">edit</a>
					| <a href="@{Profile.removeLink(link.id)}"
						onclick="return confirm('Are you sure you want to remove this link?')"
						title="Remove this link">remove</a>
				</div>
			</div>

			#{/list} #{else}
			<p>No links added yet!</p>
			#{/else}
		</div>
	</div>
	
</div>


<script type="text/javascript">
#{if flash.error}    	
      $("#error-alert").alert();
      $("#success-alert").alert('close');
#{/if}
#{else}
	#{if flash.success}  			
     	$("#success-alert").alert();
        $("#error-alert").alert('close');
	#{/if}
	#{else}
		$("#success-alert").alert('close');
		$("#error-alert").alert('close');
	#{/else}	
#{/else}
		
$(document).ready(function() {
	
	
	
	$('#tags-button').click(function() {
		var panel= $('.panel');
		panel.animate({left: parseInt(panel.css('left'),0) == 0 ? +panel.outerWidth() : 0});
		var listAction = #{jsAction @Profile.getTags()/}
		$.get(listAction(), function(data) {
			var items = [];
			var myfunc = #{jsAction @Profile.index(':tag')/};
			$.each(data, function(key, val) {
				var link = '<a href=" '+ myfunc({tag: val.name}) + '" class="tag" title="Click to see all links with tag"> ' + val.name +  ' </a>';
				console.log(link);
    			items.push('<li id="' + val + '">' + link + '</li>');
  			});
  			$('.data').html('');
  			$('<ul/>', {
    			html: items.join('')
  			}).appendTo($('.data'));
		});
		return false;
  	});
	
 	$('.link').click(function() {
   		var id= $(this).attr('id');
   		var data_id= $(".data").html();
    	var panel= $('.panel');
    	console.log($('.panel').css('left'));
		var panel_width=$('.panel').css('left');
		if(data_id==id || data_id =='') {
			panel.animate({left: parseInt(panel.css('left'),0) == 0 ? +panel.outerWidth() : 0});	
		}
		var listAction = #{jsAction @Profile.getLink(':id')/}
		$.get(listAction({id: id}), function(data) {
			$('.data').html(data.id);
		});
		return false;
  	});

  	$('.close_panel').click(function()  {
    	var panel= $('.panel');
    	panel.animate({left: parseInt(panel.css('left'),0) == 0 ? +panel.outerWidth() : 0});
    	$('.data').html('');
		return false;
  	});
     
});
</script>